<template>
  <div>
    <!-- 搜索 -->
    <van-search
      placeholder="请输入搜索关键词"
      @focus="$router.push({ name: 'search' })"
    />
  <!-- 轮播 -->
    <van-swipe :autoplay="3000">
      <van-swipe-item v-for="(image, index) in images" :key="index">
        <img v-lazy="image" />
      </van-swipe-item>
    </van-swipe>
  <!-- tabs -->
    <van-tabs>
      <van-tab :title="v.title" v-for="v in tabs" :key="v.id">
        <van-card
          v-for="v in v.children"
          :key="v.id"
          :desc="v.desc"
          :title="v.title"
          :thumb="v.url"
          @click="toDetail(v.id)"
        />
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import Vue from "vue";
import { Lazyload } from "vant";

Vue.use(Lazyload);
export default {
  computed: {
    tabs() {
      return this.$store.state.tabs
    }
  },
  data() {
    return {
      images: [
        "https://img01.yzcdn.cn/vant/apple-1.jpg",
        "https://img01.yzcdn.cn/vant/apple-2.jpg"
      ]
    };
  },
  methods: {
    toDetail(id) {
      this.$router.push({
        name: 'detail',
        params: {
          id
        }
      })
    }
  },
  created() {
    this.$store.dispatch('GET_TABS')
  }
};
</script>

<style scoped>
img {
  height: 200px;
  width: 100%;
}
</style>